import React, {Component} from 'react'
import styles from './detail.less'
import { Button } from 'antd'
import TabsControl from "../components/tabs"
import Img from "@/components/Img/Img";
import { withRouter } from 'dva/router'
import { connect } from 'dva'
import isEmpty from 'lodash/isEmpty'
import { GET_COURSE_DETAIL } from "../../../actions/course"

@connect(({ course }) => ({
  course
}))
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buy_state: 1
    }
  }

  clickHandle(bought, id) {
    if (bought) {
      this.props.history.push(`/study/${id}`)
    } else {
      this.props.history.push(`/course/order/${id}`)
    }
  }

  componentDidMount() {
    const {dispatch, match: {params: {id}}} = this.props
    dispatch(GET_COURSE_DETAIL(id))
  }


  render() {
    const {course: { detail }} = this.props
    const { teacher, title, buyers, price, bought, videoCount, icon, id, description, videos } = detail
    return (
      !isEmpty(detail) && <div className={styles.detailContainer}>
        <div className={styles.detailContentBox}>
          <div className={styles.detailContent}>
            <div className={styles.detailImg}>
              <Img src={icon}/>
            </div>
            <div className={styles.detailInfo}>
              <h2 className={styles.detailTitle}>{`${title}`}</h2>
              <span className={styles.classHour}>
            <span className={styles.classHourText}>{`${videoCount}课时`}</span>
          </span>
              <h3 className={styles.detailTeacher}>{`主讲老师：${teacher}`}</h3>
              <div className={styles.detailBuy}>
                {`已购买：${buyers}人`}
              </div>
              <div className={styles.detailCount}>
                {`¥ ${(price / 100).toFixed(2)}`}
              </div>
              <Button className={styles.buttonBuy} onClick={this.clickHandle.bind(this, bought, id)}>{bought ? '进去学习' : '立即购买'}</Button>
            </div>
          </div>
        </div>
        <div style={{paddingBottom: 192}}>
          <TabsControl description={description} videos={videos}/>
        </div>
      </div>
    );
  }
}

export default withRouter(Detail);